<template>
  <div class="menger">
    <header>部门管理</header>
    <hr style="margin-top: 50px" />
    <div class="body">
      <el-dialog width="30%" :title="show==0?'添加部门':'修改部门'" :visible.sync="dialogVisible">
          <span>
                  部门名字：<el-input style="width:30vh" placeholder="请输入部门名字" v-model="deptInfo.dname"/><br>
                  部门职责：<el-input style="width:30vh" placeholder="请输入部门职责" v-model="deptInfo.duty"/><br>
                  部门创建时间：<el-input type="date" style="width:30vh;margin-right:25px" placeholder="请输入部门创建时间" v-model="deptInfo.credate"/><br>
          </span>
          <span slot="footer" class="dialog-footer">
              <el-button type="info"  @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addOrEditDept">确 定</el-button>
          </span>
       </el-dialog>
      <el-button @click="isAll(0)" type="primary"><i class="el-icon-plus"></i>新增</el-button>
      <el-button @click="selectUseDept" type="primary"><i class="el-icon-s-cooperation"></i> 查询正在使用的部门</el-button>
      <el-button @click="selectDontUseDept" type="primary"><i class="el-icon-s-cooperation"></i> 查询已撤销的部门</el-button>
    </div>
    
    <el-table :data="deptData" style="width: 100%" border>
      <el-table-column prop="did" label="ID" width="100px"></el-table-column>
      <el-table-column prop="dname" label="部门名称" width="200px"></el-table-column>
      <el-table-column prop="duty" label="部门职责" width="width"></el-table-column>
      <el-table-column prop="credate" label="部门创建时间" width="200px" :formatter="departmen"></el-table-column>
      <el-table-column prop="dstatus" label="部门状态" width="150px" :formatter="deptUseOrNotUse"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="{row}">
          <div v-if="use == 0">
            <el-button style="color:royalblue" icon="el-icon-edit" @click="editDept(row)">编辑</el-button> 
            <el-button style="color:red" icon="el-icon-delete" @click="deleteDept(row.did)">删除</el-button>  
          </div>
          <div v-else>
            <el-button style="color:royalblue" icon="el-icon-edit" @click="editDept(row)">编辑</el-button> 
            <el-button style="color:red" icon="el-icon-delete" @click="dontDeleteDept(row.did)">撤销</el-button>  
          </div>
        </template>
      </el-table-column> 
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="margin-top:8px"
      background
      layout="prev, pager, next, jumper, ->, total"
      :page-size="limit"
      :current-page="page"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "dept",
  data() {
    return {
      dialogVisible: false, //默认关闭
      show:-1,//用于控制用户操作的是添加还是修改
      use:0,//用于控制部门的使用和未使用
      //展示数据
      deptData:[],
      //当前页
      page:1,
      //总数
      total:0,
      //一页显示多少条
      limit:5,
      //用户收集添加部门信息
      deptInfo:{
        dname:'',
        duty:'',
        credate:''
      },
    };
  },
  methods: {
    //点击添加
    isAll(show) {
      this.deptInfo = {}
      this.show = show
      this.dialogVisible = true;
    },
    async selectUseDept(){
      this.page = 1
      const {page,limit} = this
      const result = await this.$API.reqUseDept(page,limit)
      if (result.status == 0) {
        this.deptData = result.data
        this.page = result.page
        this.total = result.total
        this.limit = result.limit
        this.use = result.use
      }
    },
    async selectDontUseDept(){
      this.page = 1
      const {page,limit} = this
      const result = await this.$API.reqDontUseDept(page,limit)
      if (result.status == 0) {
        this.deptData = result.data
        this.page = result.page
        this.total = result.total
        this.limit = result.limit
        this.use = result.use
      }
    },
    //展示部门信息
    async deptUserInfo(){
      //解构参数
      const {page,limit} = this
      const result = await this.$API.reqDeptUserInfo(page,limit)
      if (result.status == 0) {
        this.deptData = result.data
        this.page = result.page
        this.total = result.total
        this.limit = result.limit
      }
    },
    //用来处理部门状态的函数
    deptUseOrNotUse(row,cloumn){
      if (row.dstatus == 0) {
        return '使用'
      }else{
        return '未使用'
      }
    },
    //用来出来部门日期的函数
    departmen(row,cloumn){
      return (row.credate || '').split('T')[0]
    },
    //处理分页函数
    handleCurrentChange(page){
      this.page = page
      this.deptUserInfo()
    },
    //保存添加部门或者修改部门
    async addOrEditDept(){
      this.dialogVisible = false
      const {dname,duty,credate} = this.deptInfo
      const jsonDate = {dname,duty,credate}
      if (this.show == 0) {
        //添加
        const result = await this.$API.reqAddDept(jsonDate)
        if (result.status == 0) {
          this.$message.success(result.message)
          this.deptInfo = {}
          this.selectUseDept()
        }else{
          this.$message.error(result.message)
        }
      }else{
        //修改
        //获取show的参数值
        const did = this.show
        const editData = {did,...jsonDate}
        const result = await this.$API.reqEditDept(editData)
        if (result.status == 0) {
          this.$message.success(result.message)
          if (this.use == 0) {
              this.selectUseDept()
          }else{
              this.selectDontUseDept()
          }
        }else{
          this.$message.success(result.message)
        }
      }
    },
    //编辑部门
    editDept(row){
      this.show = row.did
      this.dialogVisible = true
      row.credate = (row.credate || '').split('T')[0]
      //深拷贝
      this.deptInfo = {...row}
    },
    //删除部门
    async deleteDept(did){
      const result = await this.$API.reqDeleteDept(did)
      if (result.status == 0) {
        this.$message.success(result.message)
        this.selectUseDept()
      }else{
        this.$message.error(result.message)
      }
    },
    //撤销删除部门
    async dontDeleteDept(did){
      const result = await this.$API.reqDontDeleteDept(did)
      if (result.status == 0) {
        this.$message.success(result.message)
        this.selectDontUseDept()
      }else{
        this.$message.error(result.message)
      }
    }
  },
  mounted() {
    this.deptUserInfo()
  },
};
</script>

<style scoped>
.menger {
  margin: 0;
  padding: 0;

}
header {
  display: flex;
  position: absolute;
  top: 80px;
  font-size: 25px;
  font-weight: bolder;
  color: blue;
}
.body {
  margin-top: 20px;
  height: 50px;
}
.el-button {
  display: flex;
  float: left;
  margin-left: 10px;
}
.el-input {
  margin-left: 10px;
  margin: 10px 0px;
}
.dialog-footer {
  display: flex;
  flex-direction: row-reverse;
}
</style>